<template>
  <el-select
    v-model="selValue"
    filterable
    placeholder="请选择"
    style="width: 100%;"
    @visible-change="visibleChange">
    <el-option
      v-for="item in _d.options"
      :key="item.id"
      :label="item.companyName"
      :value="item.id"/>
  </el-select>
</template>

<script setup>
	import { reactive, ref, computed, onMounted } from 'vue'
	import {$get, $post} from '/@/utils/request';
	
	const emits = defineEmits(['update:modelValue'])

	const props = defineProps({
		modelValue: {
			type: [Number, String, null],
			default: ''
		}
	})

	const _d = reactive({
		options: []
	})

	const selValue = computed({
		get: () => {
			if(props.modelValue) {
				return JSON.parse(props.modelValue).id;
			}
			return '';
		},
		set: val => {
			let obj = _d.options.find(item => item.id == val);
			emits('update:modelValue', JSON.stringify({
				id: obj.id,
				name: obj.companyName
			}));
		}
	})
	
	onMounted(() => {
		getOptions();
	})

	// 获取列表
	function getOptions() {
		$post('/providerSrv/getprovider/0').then(res => {
			_d.options = res.result;
		})
	}

	function visibleChange(show) {
		if(show) {
			getOptions();
		}
	}

</script>

<style scoped>

</style>